<template>
  <div>
    <!-- 上传图片组件 -->
    <el-upload
      action="#"
      list-type="picture-card"
      :limit="1"
      :file-list="fileList"
      :on-preview="preview"
      :class="{ disabled: fileComputed }"
      :on-remove="handelRemove"
      :on-change="changeFile"
      :before-upload="beforeUpload"
      :http-request="upload"
    >
      <i class="el-icon-plus"></i>
    </el-upload>
    <!-- 进度条 -->
    <el-progress
      v-if="showPercent"
      style="width: 180px"
      :percentage="percent"
    />
    <!-- 弹出层 -->
    <el-dialog title="图片" :visible.sync="showDialog">
      <img :src="imgUrl" style="width:100%" alt="" />
    </el-dialog>
  </div>
</template>

<script>
// 引入腾讯云
import COS from "cos-js-sdk-v5"; // 引入腾讯的包
const cos = new COS({
  SecretId: "AKID40kHcjcIo7C5lGYeikkeS8i7IG0ZwALM",
  SecretKey: "tYzEON7e094kDUXM2Ys0veCVYNyOceV9"
});
export default {
  // 组件名称
  name: "ImageUpload",
  // 组件参数 接收来自父组件的数据
  props: {},
  // 局部注册的组件
  components: {},
  // 组件状态值
  data() {
    return {
      fileList: [],
      showDialog: false, // 控制弹层的显示
      imgUrl: "",
      showPercent: false, // 进度条默认不显示
      percent: 0, // 进度条初始值为0
      currentFileUid: "" // 用一个变量，记住当前上传图片的id
    };
  },
  // 计算属性
  computed: {
    // 设置用户是否已经上传完一张图片,关闭加号
    fileComputed() {
      return this.fileList.length === 1;
    }
  },
  // 侦听器
  watch: {},
  // 组件方法
  methods: {
    // 点击预览事件
    preview(file) {
      console.log(file);
      // 这里应该弹出一个层
      this.imgUrl = file.url;
      this.showDialog = true;
    },
    // 删除事件 file 要删除的文件，fileList 删除后的文件
    handelRemove(file) {
      // console.log(arguments);
      this.fileList = this.fileList.filter(item => item.uid !== file.uid);
      // this.fileList = fileList;  这个也可以
    },
    // 图片上传触发
    changeFile(file, fileList) {
      // console.log(file);
      // console.log(fileList);
      // 如果当前fileList中没有该文件的话，就往里面追加
      this.fileList = fileList.map(item => item);
    },
    beforeUpload(file) {
      // 要开始做文件上传的检查了
      // 文件类型 文件大小
      const types = ["image/jpeg", "image/gif", "image/bmp", "image/png"];
      // includes() 方法用来判断一个数组是否包含一个指定的值，如果是 返回 true，否则false。
      if (!types.includes(file.type)) {
        this.$message.error("上传图片只能是 JPG、GIF、PNG、BMG 格式！");
        return false;
      }
      // 检查上传图片的大小
      const maxsize = 5 * 1024 * 1024;
      if (maxsize < file.size) {
        this.$message.error("图片大小最大不能超过5M");
        return false;
      }
      this.currentFileUid = file.uid; // 记住当前的id
      this.showPercent = true;
      return true;
    },
    upload(params) {
      // console.log(params.file);
      // 判断时候有内容
      if (params.file) {
        cos.putObject(
          {
            Bucket: "a-liang-1306519163" /* 存储桶名称 */,
            Region: "ap-shanghai" /* 存储桶所在地域，必须字段 */,
            Key: params.file.name /* 文件名 */,
            StorageClass: "STANDARD", // 上传的模式类型，标准模式即可
            Body: params.file, // 上传文件对象
            // 进度条
            onProgress: params => {
              this.percent = params.percent * 100;
            }
          },
          (err, data) => {
            // console.log(this); 这里要使用箭头函数，改变this的指向
            console.log(err || data);
            // data 中有一个statusCode === 200 的时候说明上传成功
            if (!err && data.statusCode === 200) {
              // 上传成功；把fileList 中数据地址的url地址变成 现在上传的成功的地址
              // 需要知道上传成功的是哪一个图片
              this.fileList = this.fileList.map(item => {
                if (item.uid === this.currentFileUid) {
                  return { url: "http://" + data.Location, upload: true };
                }
                return item;
              });
              // 将上传成功的地址 回写到 fileList中 fileList变化 =》upload组件 就会根据fileList的变化去渲染视图
              setTimeout(() => {
                this.showPercent = false;
                this.percent = 0;
              }, 2000);
            }
          }
        );
      }
    }
  },
  // 以下是生命周期钩子   注：没用到的钩子请自行删除
  /**
   * 组件实例创建完成，属性已绑定，但DOM还未生成，$ el属性还不存在
   */
  created() {},
  /**
   * el 被新创建的 vm.$ el 替换，并挂载到实例上去之后调用该钩子。
   * 如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.$ el 也在文档内。
   */
  mounted() {}
};
</script>

<style>
.disabled .el-upload--picture-card {
  display: none;
}
</style>
